<template>
  <div style="margin: 10px calc(5% + 5px)">

    <!-- 标签 -->
    <div class="elevation-4 white" style="border-radius: 5px">
      <div style="font-size: 24px; font-weight: 500; color: white; background-color: rgb(35, 52, 68); text-align: center">标签</div>
      <div style="display: flex; flex-wrap: wrap; justify-content: space-between; cursor: default">
        <v-card @click="tagUpdate(index)" style="padding: 2px 3px; margin: 3px 5px 7px" color="rgb(37, 182, 167)" v-for="(tag, index) in tags" :key="tag.tagId">
          <div :class="widthLevel > 1?'d-block':'d-inline-block'" style="margin-right: 5px; color: white; font-weight: 500; font-size: 18px"><span v-if="widthLevel>1">标签名 </span>{{tag.tagName}}</div>
          <div :class="widthLevel > 1?'d-block':'d-inline-block'" style="color: white; font-weight: 500; font-size: 18px"><span v-if="widthLevel>1">文章数 </span>{{tag.articleNumber}}</div>
        </v-card>

        <v-card id="tagActivator" style="background-color: rgb(90, 181, 94); padding: 0 3px; margin: 3px 5px 7px; color: white; cursor: pointer" :style="{'height':widthLevel>1?'60px':'30px','line-height':widthLevel>1?'60px':'30px'}">
          <v-icon :size="widthLevel>1?36:30" color="white">mdi-tag</v-icon><span style="font-size: 20px; font-weight: 500">+</span>
        </v-card>
      </div>
    </div>

    <!-- 标签创建框 -->
    <v-dialog v-model="tagDialog.show" persistent max-width="300" activator="#tagActivator">
      <v-card>
        <v-card-title class="headline">标签创建及修改</v-card-title>
        <v-card-text>请注意标签名称要求在24个字符以内</v-card-text>
        <v-text-field style="margin: 0 15px !important;" v-model="tagDialog.tagName" label="请输入标签名"></v-text-field>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red" text @click="tagCancel">取消</v-btn>
          <v-btn :loading="tagDialog.loading" color="green darken-1" text @click="tagCreate">创建</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- 文章 -->
    <div style="margin: 30px auto; border-radius: 5px;" class="elevation-4 white">
      <!-- 标题 -->
      <div style="font-size: 24px; font-weight: 500; color: white; background-color: rgb(35, 52, 68); text-align: center">文章</div>

      <!-- 搜索栏 -->
      <div style="display: flex; padding: 5px 10px;justify-content: space-between;">
        <v-btn style="margin: 16px" raised @click="$router.push('/article')" color="primary">新增文章</v-btn>
        <v-spacer></v-spacer>
        <v-text-field style="max-width: calc(100px + 25%)!important;" v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details></v-text-field>
      </div>

      <!-- 具体内容 -->
      <v-data-table mobile-breakpoint="300" style="cursor: default" :search="search" :headers="getHeaders" item-key="articleId" :items="articles">
        <!-- 标题 -->
        <template v-slot:item.title="{item}">
          <span style="max-width: 30%">{{item.title}}</span>
        </template>

        <!-- 标签 -->
        <template v-slot:item.tags="{ item }">
          <span v-for="tag in item.tags" :key="tag.tagId">{{tag.tagName+" "}}</span>
        </template>

        <!-- 状态 -->
        <template v-slot:item.state="{item}">
          <span  :style="{'color': getState(item.state).color, 'text-align':'center'}">{{getState(item.state).value}}</span>
        </template>

        <!-- 操作 -->
        <template v-slot:item.actions="{item}">
          <v-btn color="blue darken-1" text @click="updateArticle(item)">修改</v-btn>
        </template>
      </v-data-table>
    </div>

    <!-- 文章修改对话框 -->
    <v-dialog v-model="articleDialog.show" max-width="300px">
      <v-card>
        <!-- 标题 -->
        <v-card-title>
          <span class="headline">文章修改</span>
        </v-card-title>

        <!-- 内容 -->
        <v-card-text>
          <v-text-field v-model="articleDialog.article.title" label="标题"></v-text-field>
          <v-select label="分类" item-text="name" item-value="classId" :items="classes" v-model="articleDialog.article.classId"></v-select>
          <v-select label="状态" item-text="text" item-value="value" :items="state" v-model="articleDialog.article.state"></v-select>
          <v-select multiple label="标签" item-text="tagName" item-value="tagId" :items="tags" v-model="articleDialog.article.tags"></v-select>
          <v-textarea rows="2" auto-grow v-model="articleDialog.article.description" label="简介"></v-textarea>

        </v-card-text>

        <!-- 操作 -->
        <v-card-actions>
          <v-btn color="green" style="color: white" text  @click="$router.push('/article/'+articleDialog.article.articleId)">修改内容</v-btn>
          <v-spacer></v-spacer>
          <v-btn color="red" style="color: white"  @click="cancel">取消</v-btn>
          <v-btn :loading="articleDialog.loading" color="blue darken-1" style="color: white" @click="save">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import Http from "../api/http";

export default {
  name: "Tag",


  data: ()=>{
    return {
      tagDialog: {
        show: false,
        tagName: '',
        loading: false,
        tagId: -1,
      },
      articleDialog: {
        show: false,
        article: {},
        loading: false,
        item: {}
      },
      articles: [],
      tags: [],
      state: [
        {
          value: 0,
          text: '草稿'
        },
        {
          value: 1,
          text: '发布'
        },
        {
          value: 2,
          text: '修订'
        },
      ],
      classes: [
        {
          classId: 1,
          name: "学习笔记"
        },
        {
          classId: 2,
          name: "采坑记录"
        },
        {
          classId: 3,
          name: "闲时杂谈"
        },
        {
          classId: 4,
          name: "转载记录"
        },
        {
          classId: 5,
          name: "其他文章"
        }
      ],
      headers: [
        {
          text: 'id',
          value: 'articleId',
        },
        {
          text: '标题',
          value: 'title',
          sortable: false,
        },
        {
          text: '分类',
          value: 'className',
          sortable: false
        },
        {
          text: '作者',
          value: 'author',
          sortable: false
        },
        {
          text: '标签',
          value: 'tags',
          sortable: false,
        },
        {
          text: '状态',
          value: 'state',
          sortable: false
        },
        {
          text: '简介',
          value: 'description',
          sortable: false,
          width: '300'
        },
        {
          text: '点赞数',
          value: 'thumbNumber',
        },
        {
          text: '浏览数',
          value: 'pageView'
        },
        {
          text: '创建时间',
          value: 'time'
        },
        {
          text: '操作',
          value: 'actions',
          sortable: false,
        }
      ],
      search: '',
    }
  },


  methods: {
    /* 取消标签对话框 */
    tagCancel(){
      this.tagDialog.tagName = '';
      this.tagDialog.show = false;
    },

    /* 更新或新建标签 */
    tagCreate(){
      // 1.设置为加载状态
      this.tagDialog.loading = true;

      // 2.参数判断
      if(this.tagDialog.tagName == ''){
        this.tagDialog.loading = false;
        this.tagDialog.show = false;
        this.$emit("childerror", "未填写标签名称");
      }

      // 3.判断是更新还是删除
      if(this.tagDialog.tagId != -1){

        // 更新
        Http.put("/tag/tag", {
          "tagName": this.tagDialog.tagName,
          "tagId": this.tagDialog.tagId
        }).then(data=>{
          if(data.code == 1){
            this.tagDialog.loading = false;
            this.tagDialog.show = false;

            Http.get("/tag/tags").then(data=>{
              if(data.code == 1){
                this.tags = data.result;
              }else {
                this.$emit("childerror",data.message);
              }
            }).catch(fail=>{
              this.$emit("childerror","服务端发生错误");
              console.error(fail);
            })

          }else {
            this.tagDialog.loading = false;
            this.tagDialog.show = false;
            this.$emit("childerror", data.message);
          }
          this.tagDialog.tagId = -1;
          this.tagDialog.tagName = '';
        }).catch(fail=>{
          console.error(fail);
          this.tagDialog.loading = false;
          this.tagDialog.show = false;
          this.$emit("childerror", "服务端发送错误");
          this.tagDialog.tagId = -1;
          this.tagDialog.tagName = '';
        })
      }else {

        // 删除
        Http.post("/tag/tag", {
          "tagName": this.tagDialog.tagName
        }).then(data=>{
          if(data.code == 1){
            this.tagDialog.loading = false;
            this.tagDialog.show = false;

            Http.get("/tag/tags").then(data=>{
              if(data.code == 1){
                this.tags = data.result;
              }else {
                this.$emit("childerror",data.message);
              }
            }).catch(fail=>{
              this.$emit("childerror","服务端发生错误");
              console.error(fail);
            })

          }else {
            this.tagDialog.loading = false;
            this.tagDialog.show = false;
            this.$emit("childerror", data.message);
          }
          this.tagDialog.tagName = '';
        }).catch(fail=>{
          console.error(fail);
          this.tagDialog.loading = false;
          this.tagDialog.show = false;
          this.$emit("childerror", "服务端发送错误");
          this.tagDialog.tagName = '';
        })
      }
      this.tagDialog.show = false;

    },

    tagUpdate(index){
      this.tagDialog.tagName = this.tags[index].tagName;
      this.tagDialog.tagId = this.tags[index].tagId;
      this.tagDialog.show = true;
    },

    /* 获取状态 */
    getState(state){
      if(state == 0){
        return {
          color: '#0a8d21',
          value: '草稿'
        }
      }else if(state == 1){
        return {
          color: '#1432b8',
          value: '发布'
        }
      }else {
        return {
          color: '#ea0a0a',
          value: '修订'
        }
      }
    },

    /* 取消文章对话框 */
    cancel(){
      this.articleDialog.show = false;
    },

    /* 保存对文章的修改 */
    save(){
      // 1.修改标签并设置加载状态
      this.articleDialog.article.tags = this.articleDialog.article.tags.map(p=>{
        let result = null;
        this.tags.forEach(tag=>{
          if(p == tag.tagId){
            result = tag;
            return;
          }
        })
        return result;
      })
      this.articleDialog.loading = true;

      // 2.更新
      Http.put("/article/article", this.articleDialog.article).then(data=>{
        if(data.code == 1){
          Http.get("/article/articles",).then(data=>{
            if(data.code == 1){
              this.articles = data.result;
            }else{
              this.$emit("childerror",data.message);
            }
            this.$emit("childloadingevent", false);
          }).catch(fail=>{
            this.$emit("childerror","服务端发生错误");
            console.error(fail);
            this.$emit("childloadingevent", false);
          })
        }else {
          this.$emit("childerror", data.message);
        }

        this.articleDialog.loading = false;
        this.articleDialog.show = false;
      }).catch(fail=>{
        this.$emit("childerror", "服务端发送错误")
        console.error(fail);
        this.articleDialog.loading = false;
        this.articleDialog.show = false;
      })

    },

    /* 开启文章对话框 */
    updateArticle(item){
      this.articleDialog.article = JSON.parse(JSON.stringify(item));
      this.articleDialog.article.tags = this.articleDialog.article.tags.map(tag=>{
        return tag.tagId;
      })
      this.articleDialog.show = true;
    }

  },


  props: {
    widthLevel: Number
  },


  computed: {
    getHeaders(){
      if(this.widthLevel == 1){
        return [this.headers[1], this.headers[this.headers.length-1]];
      }else if(this.widthLevel == 2){
        return [this.headers[0], this.headers[1], this.headers[2], this.headers[3], this.headers[4], this.headers[5], this.headers[this.headers.length-1]];
      }else if(this.widthLevel == 3){
        return [this.headers[0], this.headers[1], this.headers[2], this.headers[3], this.headers[4], this.headers[5], this.headers[7], this.headers[8], this.headers[this.headers.length-1]];
      }else {
        return this.headers;
      }
    }
  },


  activated() {
    // 1.进入加载状态
    this.$emit("childloadingevent", true);

    // 2.获取标签
    Http.get("/tag/tags").then(data=>{
      if(data.code == 1){
        this.tags = data.result;
      }else {
        this.$emit("childerror",data.message);
      }
    }).catch(fail=>{
      this.$emit("childerror","服务端发生错误");
      console.error(fail);
      this.$emit("childloadingevent", false);
    })

    // 3.获取文章
    Http.get("/article/articles",).then(data=>{
      if(data.code == 1){
        this.articles = data.result;
      }else{
        this.$emit("childerror",data.message);
      }
      this.$emit("childloadingevent", false);
    }).catch(fail=>{
      this.$emit("childerror","服务端发生错误");
      console.error(fail);
      this.$emit("childloadingevent", false);
    })
  }
}
</script>

<style scoped>
</style>